<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var plugin = (function () {
            var plugin = document.createElement("embed")
            plugin.style.display = 'none'
            plugin.type = 'application/txftn-webkit'
            plugin.sign = function () {
                console.log('开始文件扫描')
            }
            plugin.pause = function () {
                console.log('暂停文件上传')
            }
            plugin.uploading = function () {
                console.log('开始文件上传')
            }
            plugin.del = function () {
                console.log('删除文件')
            }
            plugin.done = function () {
                console.log('文件上传完成')
            }
            document.body.appendChild(plugin)
            return plugin
        })()

        // 有限状态机
        // 耦合程度较高, 都依赖于一个对象
        const FSM = {
            sign: {
                clickButton1 () {
                    console.log('点击无效, 扫描中')
                },
                clickButton2 () {
                    console.log('文件扫描中不能删除文件')
                }
            },
            upload: {
                clickButton1 () {
                    uploadObj.pause()
                },
                clickButton2 () {
                    console.log('文件上传中不能删除文件')
                }
            },
            pause: {
                clickButton1 () {
                    uploadObj.uploading()
                },
                clickButton2 () {
                    uploadObj.del()
                }
            },
            done: {
                clickButton1 () {
                    console.log('文件上传完成')
                },
                clickButton2 () {
                    uploadObj.del()
                }
            },
            error: {
                clickButton1 () {
                    console.log('文件上传失败')
                },
                clickButton2 () {
                    uploadObj.del()
                }
            }
        }

        class Upload {
            constructor(fileName) {
                this.plugin = plugin
                this.fileName = fileName
                this.dom = document.createElement('div')
                this.dom.innerHTML = `<span>${this.fileName}</span>
                    <button class="button1">暂停</button>
                    <button class="button2">删除</button>
                `
                document.body.appendChild(this.dom)
                this.button1 = this.dom.querySelector('.button1')
                this.button2 = this.dom.querySelector('.button2')

                this.state = FSM.sign
                this.bindEvent()
            }

            bindEvent () {
                this.button1.addEventListener('click', () => this.state.clickButton1(), false)
                this.button2.addEventListener('click', () => this.state.clickButton2(), false)
            }

            sign () {
                this.plugin.sign()
                this.button1.innerHTML = '扫描中,无法进行任何操作'
                this.state = FSM.sign
            }
            uploading () {
                this.plugin.uploading()
                this.button1.innerHTML = '正在上传,点击暂停'
                this.state = FSM.upload
            }
            pause () {
                this.plugin.pause()
                this.button1.innerHTML = '已暂停,点击继续上传'
                this.state = FSM.done
            }
            done () {
                this.plugin.done()
                this.button1.innerHTML = '上传完成'
                this.state = FSM.done
            }
            error () {
                this.button1.innerHTML = '上传失败'
                this.state = FSM.error
            }
            del () {
                this.plugin.del()
                this.dom.parentNode.removeChild(this.dom)
            }
        }

        var uploadObj = new Upload('状态模式')

        window.upload = function (state) {
            uploadObj[state]()
        }

        window.upload('sign')
        setTimeout(function () {
            window.upload('uploading')
        }, 2000)
        setTimeout(function () {
            window.upload('done')
        }, 4000)

    </script>
</body>

</html>